<template>
  <div class="">
    <!-- 弹窗 -->
    <el-dialog v-model="store.openAdd" :show-close="false" append-to-body class="dialogClass" width="36%" draggable overflow >
      <!--弹窗标题-->
      <template #header="{ close, titleId }">
        <div class="dialogHeader">
          <span :id="titleId" class="dlgTitleClass" style="margin: 10px 10px;" v-if="store.roleId===0">新增</span>
          <span :id="titleId" class="dlgTitleClass" style="margin: 10px 10px; " v-if="store.roleId!==0">修改</span>
          <el-icon style="font-size: 18px;margin-top: 14px;cursor: pointer" @click="closeDialog">
            <CloseBold/>
          </el-icon>
        </div>
      </template>
      <!--弹窗内容-->
      <template #default>
        <el-form class="role-form" ref="addRoleFormRef" :rules="rules" :model="addRoleData">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="addRoleData.roleName" placeholder="请输入角色名称"></el-input>
          </el-form-item>
          <el-form-item label="角色标识" prop="roleKey">
            <el-input v-model="addRoleData.roleKey" placeholder="请输入角色唯一标识" :disabled="store.roleId!==0"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDescription" >
            <el-input v-model="addRoleData.roleDescription" placeholder="请输入角色描述"></el-input>
          </el-form-item>
          <el-form-item label="数据权限" prop="roleDataScope">
            <el-select placeholder="请选择数据权限" v-model="addRoleData.roleDataScope" :disabled="isDisabled()">
              <el-option v-for="item in dataScopeInfo" :key="item.value" :label="item.label" :value="item.value" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="启用" label-width="78px" prop="status">
            <el-radio-group v-model="addRoleData.status">
              <el-radio border :label="0">是</el-radio>
              <el-radio border :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </template>
      <!--弹窗底部-->
      <template #footer>
        <span class="myDialogFooter">
          <el-button class="el-button__default" @click="closeDialog">取 消</el-button>
          <el-button type="primary" class="el-button__primary" @click="addRoleInfo()" v-if="store.roleId===0">确认添加</el-button>
          <el-button type="primary" class="el-button__primary" @click="updateRoleInfo()" v-if="store.roleId!==0">确认修改</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {defineEmits, onMounted, reactive, ref, watch} from "vue";
import {CloseBold} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {roleStore} from "@/stores/role/roleStore.js";
import {addOrUpdateRole, getRoleInfoById} from "@/api/role/index.js";
const addRoleFormRef = ref()
const emit = defineEmits(['refresh'])
const addRoleData= ref({
  id:0,
  roleName:"",
  roleKey:"",
  roleDescription:"",
  roleDataScope:0,
  status:0
})
const store=roleStore()
const isDisabled=()=>{
  //roleId为1或2就不能修改
  return store.roleId===1||store.roleId===2
}
const dataScopeInfo = ref([
  { label: '全部数据权限', value: 0 },
  { label: '本级数据权限', value: 1 },
  { label: '本级及以下数据权限', value: 2 },
  { label: '仅本人数据权限', value: 3 },
])
const rules=reactive({
  roleName:[
    {required:true,message:"角色名称不能为空",trigger:"blur"}
  ],
  roleKey:[
    {required:true,message:"角色标识不能为空",trigger:"blur"}
  ],
  roleDescription:[
    {required:true,message:"角色描述不能为空",trigger:"blur"}
  ],
  roleDataScope:[
    {required:true,message:"角色数据权限不能为空",trigger:"blur"}
  ]
})


//观察menuId变化

watch(store,()=>{
  if (store.roleId!==0){
    initRoleInfo(store.roleId)
  }
})

/**
 * 获取
 * @param id
 * @returns {Promise<void>}
 */
const initRoleInfo=async (id) => {
  const res = await getRoleInfoById(id)
  addRoleData.value=res.data
}
const addRoleInfo = async () => {
 const valid= await addRoleFormRef.value.validate()
 if(valid) {
   try {
     const res = await addOrUpdateRole(addRoleData.value,"add")
     if (res.code === 200) {
       ElMessage.success("添加成功")
       await closeDialog()
       emit('refresh')
     }
   }catch (e){}
 }
}
const updateRoleInfo =async () => {
  console.log(addRoleData.value)
  const valid= await addRoleFormRef.value.validate()
  if(valid) {
    ElMessageBox.confirm(
        '此操作将永久修改该角色, 是否继续?',
        '提示', {
          app: undefined, components: undefined, config: undefined, directives: undefined, mixins: [], provides: undefined,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
    ).then(async () => {
      const res =await addOrUpdateRole(addRoleData.value,"update")
      if (res.code === 200) {
        ElMessage.success("修改成功")
        await closeDialog()

      }
    }).catch(() => {
    })
  }
}
const  closeDialog = () => {
  store.setOpenAdd(false)
  addRoleFormRef.value.resetFields()
  addRoleData.value = {
    id:0,
    roleName:"",
    roleKey:"",
    roleDescription:"",
    roleDataScope:0,
    visible:0,
  }
  emit('refresh')
}
</script>

<style scoped>
.dialogClass .dlgTitleClass {
}

.el-dialog .el-dialog__header {
  margin: 0 !important;
  padding: 0 !important;
}

.el-dialog .dialogHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 40px;
  margin: 0 10px;
  font-size: 18px;
  font-weight: bolder;
}

/* 确保对话框主体可以使用flex布局 */
:deep(.el-dialog__body) {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 0 50px!important;
}

.role-form {
  margin:0  50px; /* 自动边距用于水平居中 */
}

.el-dialog .el-dialog__footer {
  padding: 10px;
}

/* 统一选择框、数字框和输入框的宽度 */
.el-input,
.el-input-number,
.el-select,
.el-tree-select{
  --el-select-input-focus-border-color: rgb(46, 92, 246);
  --el-color-primary: rgb(46, 92, 246);
  width: 100%; /* 或者设置一个具体的像素值，比如240px */
  box-sizing: border-box; /* 确保内边距和边框包含在元素的总宽度和高度内 */
}

.el-radio.is-bordered.is-checked {
  --el-color-primary: rgb(46, 92, 246);
}

.el-radio {
  --el-radio-input-border-color-hover: rgb(46, 92, 246);
}
</style>